<template>
  <div class="login-container">
    <!-- 左侧内容区域 -->
    <div class="left-section">
      <div class="left-content">
        <!-- 更新标题为宁德师范学院信息工程学院教科研平台 -->
        <h1 class="main-title nowrap-title">宁德师范信息工程学院教科研平台</h1>
        <!-- 更新描述文字 -->
        <p class="description">
          高效的教学科研管理平台，为教育工作者提供全方位的
          项目管理、数据分析和协作工具。简化工作流程，
          提升研究效率，助力教育事业发展。
        </p>
        <!-- 增强波浪装饰效果 -->
        <div class="wave-decoration">
          <svg viewBox="0 0 800 400" class="wave-svg">
            <path d="M0,200 Q200,100 400,200 T800,200" stroke="#60a5fa" stroke-width="3" fill="none" opacity="0.8"/>
            <path d="M0,220 Q200,120 400,220 T800,220" stroke="#3b82f6" stroke-width="2" fill="none" opacity="0.6"/>
            <path d="M0,240 Q200,140 400,240 T800,240" stroke="#1d4ed8" stroke-width="2" fill="none" opacity="0.4"/>
          </svg>
        </div>

        <!-- Added floating geometric elements -->
        <div class="floating-elements">
          <div class="floating-circle circle-1"></div>
          <div class="floating-circle circle-2"></div>
          <div class="floating-circle circle-3"></div>
          <div class="floating-square square-1"></div>
          <div class="floating-square square-2"></div>
          <div class="floating-triangle triangle-1"></div>
          <div class="floating-triangle triangle-2"></div>
        </div>

        <!-- Added particle system -->
        <div class="particle-system">
          <div class="particle particle-1"></div>
          <div class="particle particle-2"></div>
          <div class="particle particle-3"></div>
          <div class="particle particle-4"></div>
          <div class="particle particle-5"></div>
          <div class="particle particle-6"></div>
          <div class="particle particle-7"></div>
          <div class="particle particle-8"></div>
        </div>

        <!-- Added grid pattern overlay -->
        <div class="grid-pattern">
          <svg viewBox="0 0 100 100" class="grid-svg">
            <defs>
              <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />
          </svg>
        </div>

        <!-- Added animated lines -->
        <div class="animated-lines">
          <div class="line line-1"></div>
          <div class="line line-2"></div>
          <div class="line line-3"></div>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="right-section">
      <div class="login-form-container">
        <!-- Logo区域 -->
        <div class="logo-section">
          <div class="logo">
            <!-- 更新logo文字 -->
            <span class="logo-text">教科研</span>
            <span class="logo-subtitle">MANAGEMENT SYSTEM</span>
          </div>
        </div>

        <!-- 登录表单 -->
        <div class="login-form">
          <el-form :model="admin" class="form-wrapper">
            <el-form-item>
              <el-input
                  v-model="admin.userAccount"
                  prefix-icon="User"
                  placeholder="用户名"
                  class="login-input"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                  v-model="admin.userPassword"
                  show-password
                  prefix-icon="Lock"
                  placeholder="密码"
                  class="login-input"
              />
            </el-form-item>

            <el-form-item prop="code">
              <div class="verify-code">
                <el-input
                    v-model="code"
                    placeholder="验证码"
                    @keyup.enter="login"
                    class="login-input"
                />
                <!-- 显示验证码图片 -->
                <img
                    v-if="captchaImage"
                    :src="captchaImage"
                    @click="getCaptchaMethod"
                    class="verify-image"
                    alt="验证码"
                />
                <div v-else @click="getCaptchaMethod" class="verify-image loading-captcha">
                  加载中...
                </div>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                  type="primary"
                  class="login-button"
                  @click="login"
                  :loading="loading"
              >
                {{ loading ? '登录中...' : '登录' }}
              </el-button>
            </el-form-item>
          </el-form>


        </div>
      </div>


    </div>
  </div>
</template>



<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { UserLogin } from "@/api/login.js"
import { getCaptcha } from "@/api/user.js"; // 确保已安装 axios

const router = useRouter()

const admin = reactive({
  userAccount: "",
  userPassword: ""
})

const code = ref('')  // 存储验证码输入
const loading = ref(false)  // 控制按钮加载状态
const captchaImage = ref('')  // 存储验证码的 base64 字符串
const captchaUuid = ref('')  // 存储验证码的 UUID

onMounted(() => {
  getCaptchaMethod()  // 页面加载时获取验证码
})

// 获取验证码
const getCaptchaMethod = async () => {
  try {
    const response = await getCaptcha();  // 调用后端验证码接口
    if (response && response.image && response.uuid) {
      captchaImage.value = response.image;  // 存储验证码图片
      captchaUuid.value = response.uuid;    // 存储验证码的 UUID
    } else {
      ElMessage.error('获取验证码失败');
    }
  } catch (error) {
    console.error('获取验证码出错:', error);
    ElMessage.error('获取验证码失败，请刷新页面重试');
  }
};

// 保存用户信息到本地存储
const saveUserInfo = (data) => {
  localStorage.setItem('userInfo', JSON.stringify({
    userId: data.userId,
    userName: data.userName,
    userRole: data.userRole,
    userAvatar: data.avatar,
    token: data.token
  }))
}

const login = async () => {
  // 表单验证
  if (!admin.userAccount) {
    ElMessage.warning('请输入用户名')
    return
  }
  if (!admin.userPassword) {
    ElMessage.warning('请输入密码')
    return
  }
  if (!code.value) {
    ElMessage.warning('请输入验证码')
    return
  }
  if (!captchaUuid.value) {
    ElMessage.warning('验证码已失效，请重新获取')
    await getCaptchaMethod()  // 刷新验证码
    return
  }

  loading.value = true
  try {
    // 修改登录请求，添加验证码信息
    const loginData = {
      ...admin,
      captcha: code.value,
      uuid: captchaUuid.value
    }

    const response = await UserLogin(loginData)

    if (response.code === 1 && response.data) {
      // 保存用户信息
      saveUserInfo(response.data)
      console.log('登录成功，用户信息已保存', response.data)
      ElMessage.success('登录成功')

      // 登录成功后跳转到首页或仪表板
      await router.push({ path: '/main/result/papers' })
    } else {
      ElMessage.error(response.msg || '账号或密码错误')
      getCaptchaMethod()  // 刷新验证码
    }
  } catch (error) {
    console.error('登录出错:', error)
    ElMessage.error('登录失败，请重试')
    getCaptchaMethod()  // 刷新验证码
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
/* 主容器 */
.login-container {
  display: flex;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* Added subtle background texture */
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* 左侧区域 */
.left-section {
  flex: 1;
  /* Enhanced gradient with more depth and modern colors */
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* Added subtle shadow for depth */
  box-shadow: inset -10px 0 30px rgba(0, 0, 0, 0.1);
  /* 新增：确保左侧有足够宽度容纳标题 */
  min-width: 650px;
}

/* Added subtle animation to left content */
.left-content {
  /* 修改：扩大内容容器最大宽度 */
  max-width: 800px;
  padding: 2rem;
  color: white;
  z-index: 2;
  animation: fadeInLeft 0.8s ease-out;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.main-title {
  /* 修改：适当缩小字体大小避免换行 */
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.2;
  /* Added text shadow and gradient text effect */
  background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 新增：强制标题不换行的核心样式 */
.nowrap-title {
  white-space: nowrap; /* 禁止自动换行 */
  overflow: visible;  /* 溢出内容不隐藏 */
  text-overflow: clip; /* 不显示省略号 */
}

.description {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.95;
  margin-bottom: 3rem;
  /* Enhanced text styling */
  color: #e2e8f0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Enhanced wave decoration with animations */
.wave-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400px;
  opacity: 0.4;
}

.wave-svg {
  width: 100%;
  height: 100%;
  animation: waveFloat 6s ease-in-out infinite;
}

@keyframes waveFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Added floating animated elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.2));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 80px;
  height: 80px;
  top: 15%;
  right: 10%;
  animation: float1 8s ease-in-out infinite;
}

.circle-2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 20%;
  animation: float2 10s ease-in-out infinite;
}

.circle-3 {
  width: 40px;
  height: 40px;
  top: 35%;
  right: 35%;
  animation: float3 12s ease-in-out infinite;
}

.floating-square {
  position: absolute;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(139, 92, 246, 0.1));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: rotate(45deg);
}

.square-1 {
  width: 50px;
  height: 50px;
  top: 25%;
  left: 15%;
  animation: floatRotate1 15s linear infinite;
}

.square-2 {
  width: 30px;
  height: 30px;
  top: 70%;
  left: 25%;
  animation: floatRotate2 20s linear infinite;
}

.floating-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.triangle-1 {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 43px solid rgba(34, 197, 94, 0.2);
  top: 45%;
  left: 8%;
  animation: triangleFloat1 18s ease-in-out infinite;
}

.triangle-2 {
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 26px solid rgba(239, 68, 68, 0.2);
  top: 20%;
  left: 30%;
  animation: triangleFloat2 14s ease-in-out infinite;
}

/* Added particle system */
.particle-system {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.particle-1 { top: 10%; left: 20%; animation: particleFloat1 25s linear infinite; }
.particle-2 { top: 30%; left: 80%; animation: particleFloat2 30s linear infinite; }
.particle-3 { top: 50%; left: 15%; animation: particleFloat3 35s linear infinite; }
.particle-4 { top: 70%; left: 70%; animation: particleFloat4 28s linear infinite; }
.particle-5 { top: 20%; left: 60%; animation: particleFloat5 32s linear infinite; }
.particle-6 { top: 80%; left: 40%; animation: particleFloat6 26s linear infinite; }
.particle-7 { top: 40%; left: 90%; animation: particleFloat7 38s linear infinite; }
.particle-8 { top: 60%; left: 5%; animation: particleFloat8 22s linear infinite; }

/* Added grid pattern overlay */
.grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

.grid-svg {
  width: 100%;
  height: 100%;
}

/* Added animated lines */
.animated-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
  height: 2px;
}

.line-1 {
  width: 200px;
  top: 30%;
  left: -200px;
  animation: lineMove1 8s linear infinite;
}

.line-2 {
  width: 150px;
  top: 60%;
  left: -150px;
  animation: lineMove2 12s linear infinite;
}

.line-3 {
  width: 100px;
  top: 80%;
  left: -100px;
  animation: lineMove3 10s linear infinite;
}

/* Animation keyframes for all new elements */
@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-180deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(360deg); }
}

@keyframes floatRotate1 {
  0% { transform: rotate(45deg) translateY(0px); }
  50% { transform: rotate(225deg) translateY(-20px); }
  100% { transform: rotate(405deg) translateY(0px); }
}

@keyframes floatRotate2 {
  0% { transform: rotate(45deg) translateY(0px); }
  50% { transform: rotate(-135deg) translateY(-15px); }
  100% { transform: rotate(45deg) translateY(0px); }
}

@keyframes triangleFloat1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.2; }
  50% { transform: translateY(-30px) rotate(180deg); opacity: 0.4; }
}

@keyframes triangleFloat2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.2; }
  50% { transform: translateY(-20px) rotate(-180deg); opacity: 0.3; }
}

@keyframes particleFloat1 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

@keyframes particleFloat2 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(-30px); opacity: 0; }
}

@keyframes particleFloat3 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(80px); opacity: 0; }
}

@keyframes particleFloat4 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(-60px); opacity: 0; }
}

@keyframes particleFloat5 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

@keyframes particleFloat6 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(-80px); opacity: 0; }
}

@keyframes particleFloat7 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

@keyframes particleFloat8 {
  0% { transform: translateY(0px) translateX(0px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(-40px); opacity: 0; }
}

@keyframes lineMove1 {
  0% { left: -200px; }
  100% { left: 100%; }
}

@keyframes lineMove2 {
  0% { left: -150px; }
  100% { left: 100%; }
}

@keyframes lineMove3 {
  0% { left: -100px; }
  100% { left: 100%; }
}

/* 右侧区域 */
.right-section {
  flex: 0 0 480px;
  background: white;
  display: flex;
  flex-direction: column;
  position: relative;
  /* Added subtle shadow and border radius */
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 0 20px;
}

.login-form-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 3rem;
  /* Added fade in animation */
  animation: fadeInRight 0.8s ease-out 0.2s both;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Logo区域 */
.logo-section {
  text-align: center;
  margin-bottom: 3rem;
  /* Added subtle animation */
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo {
  display: inline-block;
  /* Added subtle hover effect */
  transition: transform 0.3s ease;
}

.logo:hover {
  transform: scale(1.05);
}

.logo-text {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  /* Enhanced gradient color */
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
  text-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.logo-subtitle {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  letter-spacing: 0.15em;
  font-weight: 600;
}

/* 登录表单 */
.login-form {
  width: 100%;
  /* Added staggered animation for form elements */
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.form-wrapper {
  width: 100%;
}

/* Enhanced input box styles with modern design */
:deep(.login-input .el-input__wrapper) {
  background-color: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 0 16px;
  height: 52px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.login-input .el-input__wrapper:hover) {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

:deep(.login-input .el-input__wrapper.is-focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 4px 16px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

:deep(.login-input .el-input__inner) {
  height: 48px;
  color: #1f2937;
  font-size: 1rem;
  font-weight: 500;
}

:deep(.login-input .el-input__inner::placeholder) {
  color: #9ca3af;
  font-weight: 400;
}

/* Enhanced prefix icon styling */
:deep(.login-input .el-input__prefix) {
  color: #6b7280;
  transition: color 0.3s ease;
}

:deep(.login-input .el-input__wrapper.is-focus .el-input__prefix) {
  color: #3b82f6;
}

/* 验证码区域 */
.verify-code {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.verify-code .el-input {
  flex: 1;
}

/* Enhanced verify image styling */
.verify-image {
  cursor: pointer;
  height: 52px;
  width: 130px;
  border-radius: 12px;
  border: 2px solid #e2e8f0;
  object-fit: cover;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.verify-image:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.loading-captcha {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 500;
}

/* Enhanced login button with modern gradient and animations */
.login-button {
  width: 100%;
  height: 52px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  position: relative;
  overflow: hidden;
}

.login-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.login-button:hover::before {
  left: 100%;
}

.login-button:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.login-button:active {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

/* 表单项间距 */
:deep(.el-form-item) {
  margin-bottom: 1.5rem;
}

:deep(.el-form-item:last-child) {
  margin-bottom: 0;
}

/* 底部链接 */
.footer-links {
  text-align: center;
  margin-top: 2rem;
}

/* Enhanced link styling */
.link {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  position: relative;
}

.link:hover {
  color: #2563eb;
  background-color: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}

/* 页面底部 */
.page-footer {
  padding: 1.5rem 3rem;
  text-align: center;
  border-top: 1px solid #f1f5f9;
  /* Added subtle background */
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

/* Enhanced footer link styling */
.footer-link {
  color: #64748b;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.footer-link:hover {
  color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.05);
  transform: translateY(-1px);
}

.separator {
  color: #cbd5e1;
  margin: 0 0.75rem;
  font-weight: 300;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
  }

  .left-section {
    flex: 0 0 300px;
    min-width: auto; /* 大屏最小宽度在小屏失效 */
  }

  .right-section {
    flex: 1;
    border-radius: 0;
  }

  .main-title {
    font-size: 1.8rem; /* 小屏进一步缩小字号 */
  }
}

@media (max-width: 768px) {
  .left-section {
    flex: 0 0 200px;
  }

  .login-form-container {
    padding: 1.5rem 2rem;
  }

  .page-footer {
    padding: 1rem 2rem;
  }

  .main-title {
    font-size: 1.5rem; /* 手机端再缩小 */
  }

  .description {
    font-size: 1rem;
  }

  /* Enhanced mobile input styling */
  :deep(.login-input .el-input__wrapper) {
    height: 48px;
  }

  .login-button {
    height: 48px;
  }

  .verify-image {
    height: 48px;
    width: 110px;
  }
}

/* Added smooth scrolling and focus improvements */
* {
  box-sizing: border-box;
}

:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
</style>
